<template>
	<view class="nav">
		<view class="nav_item" v-for="(item, index) in data" :key="index"
			@click="to(item)">
			<view class="nav_item_box">
				<rui-icons :type="item.icon" size="40" :color="item.type == runder?.runType ? 'var(--color)':'#000'"></rui-icons>
				<view class="nav_item_box_name" :style="item.type == runder?.runType ? 'color: var(--color)':'color: #000'">
		<!-- 		<rui-icons :type="item.icon" size="40" ></rui-icons>
				<view class="nav_item_box_name" > -->
					{{$t(item.name)}}
				</view>
			</view>
			<view class="nav_item_status" v-if="item.type == runder?.runType">
			<!-- <view class="nav_item_status"> -->
				<rui-icons type="runstatus" color="var(--color)"></rui-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { runderStore } from '@/store';
	let runder = runderStore();
	
	let data = [{
			name: "plugin.nav.name.detectionMode",
			icon: "detection",
			type: "detection",
			status: 0
		},
		{
			name: "plugin.nav.name.standardMode",
			icon: "standard",
			type: "standard",
			status: 1
		},
		{
			name: "plugin.nav.name.enhancedMode",
			icon: "strengthen",
			type: "strengthen",
			status: 0
		},
		{
			name: "plugin.nav.name.softMirrorMode",
			icon: "endoscope",
			type: "endoscope",
			status: 0
		},
		{
			name: "plugin.nav.name.lumenPattern",
			icon: "lumen",
			type: "lumen",
			status: 0
		},
		{
			name: "plugin.nav.name.dryMode",
			icon: "dry",
			type: "dry",
			status: 0
		},
	]
	
	const to = (d) => {
		if(runder.isRun && runder.runType != d.type) {
			uni.showToast({
				title: "运行中",
				icon: "error"
			})
			return
		}
		uni.$rui.route('pages/device/model/model', {type: d.type, name: d.name})
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 15px;

		&_item {
			border-radius: 15px;
			border: 3px solid #f7f8f9;
			box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
			background: linear-gradient(to bottom, #ebeff7, #fff);
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			position: relative;

			&:active {
				background: var(--bg);
			}

			&_status {
				width: 25px;
				height: 25px;
				// background: #f30;
				text-align: center;
				line-height: 25px;
				animation: spin 2s linear infinite;
				position: absolute;
				top: 10px;
				right: 10px;
			}

			/* 定义旋转动画 */
			@keyframes spin {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			&_box {
				&_name {
					margin-top: 5px;
				}
			}
		}
	}
</style>